<template>
  <div class="modifyInfo">
        <div class="pic_wrap">
              <label>个人头像</label>
              <div class="pic">
                    <img :src="image"/>
                    <input type="file" @change="mofidyPic($event)"/>
              </div>
        </div>
        <div class="basicInfo">
              <p class="title">基本信息</p>
              <ul>
                   <li>
                       <label>姓名</label>
                       <input type="text" v-model="chname" placeholder="姓名" />
                   </li>
                   <li @click="sex_tab_show=!sex_tab_show">
                       <label>性别</label>
                       <input type="text" v-model="sexWord" placeholder="请选择" readonly />
                   </li>
                   <li @click="selectedDate.show=true">
                       <label>出生日期</label>
                       <input type="text" v-model="birth" readonly placeholder="请选择"/>
                   </li>
              </ul>
        </div>
        <div class="address">
              <p class="title">常住地址<span>（不少于5字符）</span></p>
              <textarea v-model="address"></textarea>
        </div>
        <p class="commit" @click="commit();">更新个人信息</p>
        <!--性别选项卡-->
        <div class="sex_prop" v-show="sex_tab_show" @click="closeProp();">
             <ul class="tab">
                  <li :class="{'active':sex==='0'}">
                      <label>男</label>
                      <input type="radio" name="sex" value="0" v-model="sex"/>
                  </li>
                  <li :class="{'active':sex==='1'}">
                      <label>女</label>
                      <input type="radio" name="sex" value="1" v-model="sex"/>
                  </li>
             </ul>
        </div>
        <!--日历-->
        <date :selectedDate="selectedDate"></date>
  </div>
</template>

<script>
import date from './date'
export default {
    data(){
        return{
          image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495189230443&di=92ebbbe3a9cbce6a605b8637b185d84c&imgtype=0&src=http%3A%2F%2Fnews.mydrivers.com%2FImg%2F20110518%2F04481549.png',
          chname:'',
          sexWord:'',
          sex:'',
          birth:'',
          address:'',
          sex_tab_show:false,
          selectedDate:{
            actual:'',
            temporary:'',
            show:false,
            year:[1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010]
          }
        }
    },
    components:{
       date
    },
    mounted:function(){
      this.getData();
    },
    watch:{
      'sex':function(){
         this.checkSex();
      },
      'selectedDate.actual':function(){
        this.birth=this.selectedDate.actual;
      }
    },
    methods:{
      mofidyPic(e){
        let _this=this;
        var simpleFile=e.currentTarget.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(simpleFile);
        reader.onload = function(e){
            _this.image=this.result;
        }
      },
      checkSex(){
       if(this.sex==='0'){
          this.sexWord="男";
        }else if(this.sex==='1'){
          this.sexWord="女";
        }
      },
      closeProp(){
         let _this=this;
         setTimeout(function(){
           _this.sex_tab_show=false;
         },100);
      },
      getData(){
        var _this=this;
        _this.$http.get("/api/comnControl.do?id="+sessionStorage.user_openid+"&getCanxinPersonInfo=null").then((response)=>{
           console.log(response);
           if(response.body.rows.length==1){
             var data=response.body.rows[0];
             _this.image=data.headImg;
             _this.chname=data.chname;
             _this.sex=data.sex;
             _this.birth=data.birth;
             _this.address=data.address;
           }else if(response.body.rows.length==0){
              _this.image=sessionStorage.user_headimgurl;
              _this.chname=sessionStorage.user_nickname;
              _this.sex=sessionStorage.user_sex;
           }
        })
      },
      commit(){
        var _this=this;
        if(_this.image.indexOf('baidu')>-1){
          alert('请上传头像');
          return false;
        }
        if(!_this.chname){
          alert('请填写您的姓名');
          return false;
        }
        if(!_this.sex){
          alert('请选择您的性别');
          return false;
        }
        if(!_this.birth){
          alert('请填写您的出生日期');
          return false;
        }
        if(_this.address.length<5){
          alert('请填写完整的常住地址');
          return false;
        }
        _this.$http.post("/api/comnControl.do?saveCanxinPersonInfo",
                    {
                      id: sessionStorage.user_openid,
                      chname: _this.chname,
                      sex: _this.sex,
                      birth: _this.birth,
                      address: _this.address,
                      headImg: _this.image,
                      createDate: "",
                      updateDate: "",
                      remark: "",
                      status: ""
                    })
        .then(
          (response)=>{
            console.log(response);
            if(response.body.rtnCode=="ok"){
              alert("保存成功");
              _this.$router.push({name:'center'});
            }
          },
          (error)=>{
            _this.finish=true;
            console.log(error);
          }
        );
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.modifyInfo
{
   padding-top:0.4rem;
   .pic_wrap
   {
      background:#fff;
      padding:0 0.3rem;
      position: relative;
      border-top:1px solid #eee;
      border-bottom:1px solid #eee;
      &::after 
      {
         content:'';
         display:inline-block;
         width:0.15rem;
         height:0.15rem;
         border-right:1px solid #999;
         border-top:1px solid #999;
         position:absolute;
         right:0.3rem;
         top:0.7rem;
         -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
             -ms-transform: rotate(45deg);
              -o-transform: rotate(45deg);
                 transform: rotate(45deg);
      }
      label
      {
        line-height:1.5rem;
        height:1.5rem;
      }
      .pic
      {
        width:1.2rem;
        height:1.2rem;
        position: absolute;
        right:0.6rem;
        top:0.15rem;
        border-radius:50%;
        overflow:hidden;
        img{
          width:100%;
          height:100%;
          border-radius:50%;
        }
        input
        {
          position: absolute;
          left:0;
          top:0;
          width:100%;
          height:100%;
          opacity:0;
        }
      }
   }
   .basicInfo
   {
    .title
    {
      padding:0.2rem 0.3rem 0.1rem 0.3rem;
      color:#666;
      font-size:0.28rem;
    }
    ul
    {
      background:#fff;
      padding-left:0.3rem;
      margin-top:0.3rem;
      li
      {
        position:relative;
        padding:0 0 0 1.4rem;
        height:0.88rem;
        line-height:0.88rem;
        &:first-child
        {
          border-bottom:1px solid #eee;
        }
        &:nth-child(2),
        &:nth-child(3)
        {
          border-bottom:1px solid #eee;
          position:relative;
          &::after 
          {
             content:'';
             display:inline-block;
             width:0.15rem;
             height:0.15rem;
             border-right:1px solid #999;
             border-top:1px solid #999;
             position:absolute;
             right:0.3rem;
             top:0.36rem;
             -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                 -ms-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                     transform: rotate(45deg);
          }
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
        }
      }
    }
   }
   .address
   {
    .title
    {
      padding:0.2rem 0.3rem 0.1rem 0.3rem;
      color:#666;
      font-size:0.28rem;
      span
      {
        font-size:0.22rem;
      }
    }
    textarea
    {
      height:2rem;
      padding:0.2rem 0.3rem;
      background:#fff;
      line-height:1.2;
      width:100%;
      border:none;
      resize:none;
      border-top:1px solid #eee;
      border-bottom:1px solid #eee;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
   }
   .sex_prop
   {
      width:100%;
      height:100%;
      position:fixed;
      background:rgba(0,0,0,0.5);
      left:0;
      top:0;
      .tab
      {
        padding:0.3rem 0;
        width:6rem;
        background:#fff;
        position:absolute;
        left:50%;
        top:50%;
        margin-top:-1.35rem;
        margin-left:-3rem;
        li
        {
           line-height:0.8rem;
           height:0.8rem;
           padding:0 0.4rem;
           position:relative;
           &::before
           {
             content:'';
             width:0.3rem;
             height:0.3rem;
             border:1px solid #ccc;
             border-radius:50%;
             display:inline-block;
             vertical-align:middle;
           }
           &.active
           {
             &::before
             {
               content:'√';
               width:0.3rem;
               height:0.3rem;
               line-height:0.34rem;
               text-align:center;
               font-size:0.2rem;
               border:1px solid #078def;
               background:#078def;
               color:#fff;
               border-radius:50%;
               display:inline-block;
               vertical-align:middle;
             }
           }
           label
           {
             margin-left:0.1rem;
           }
           input
           {
             width:100%;
             height:100%;
             position:absolute;
             left:0;
             top:0;
             border:none;
             z-index:1001;
           }
        }
      }
   }
   .commit
   {
      margin:0.3rem 0.24rem;
      line-height:0.8rem;
      height:0.8rem;
      border-radius:0.1rem;
      border:1px solid #078def;
      text-align:center;
      background:#078def;
      color:#fff;
      font-size:0.32rem;
   }
}
</style>
